package com.example.contact.view

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material.Divider
import androidx.compose.material.Text
import androidx.compose.material.contentColorFor
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.contact.model.Contact
import com.example.contact.navigation.NavigationController
import com.example.contact.navigation.Screen
import com.example.contact.viewmodel.ContactDetailCommands
import com.example.contact.viewmodel.ContactDetailState
import com.example.featuresdk.model.User
import com.example.featuresdk.theme.DemoTheme
import com.example.featuresdk.view.*

@Composable
fun ContactDetailScreen(uiState: ContactDetailState, commands: ContactDetailCommands, uiConstraints: LayoutConstraints){

    FullScreen(uiConstraints){
        ContactDetailScreenHeader(uiConstraints = uiConstraints)

        AppBodyView(bodyHeightDp = {(uiConstraints.appBodyHeightDp + uiConstraints.appBottomBarHeightDp).dp}) {
            ContactDetailView(uiState, commands)
        }
    }
}

@Composable
fun ContactDetailView(uiState: ContactDetailState, commands: ContactDetailCommands) {

    val listState = rememberScrollState()

    Column(modifier = Modifier
        .fillMaxSize()
        .scrollable(listState, Orientation.Vertical, true),
        horizontalAlignment = Alignment.CenterHorizontally) {

        Row {

            Image(painterResource(uiState.user.icon), uiState.user.nickname,
                Modifier.size(100.dp).padding(6.dp))

            Column(Modifier.fillMaxWidth().padding(6.dp),) {

                Text(text = uiState.username.value, style = DemoTheme.typography.header,
                    textAlign = TextAlign.Start,
                    color = contentColorFor(DemoTheme.colors.primary))

                if(uiState.showNickname) {
                    Text(text = "Nickname : ${uiState.user.nickname}", Modifier.alpha(0.5f),
                        color = contentColorFor(DemoTheme.colors.primary))
                }

                Text(text = "Identifier : ${uiState.user.id}", Modifier.alpha(0.5f),
                    color = contentColorFor(DemoTheme.colors.primary))
            }
        }

        Divider(color = DemoTheme.colors.primary, thickness = 8.dp)

        if(uiState.user.id == User.ME.id){
            if(uiState.hasChatAccess.value) {
                ButtonRow(com.example.featuresdk.R.drawable.ic_chat, "Message") {
                    commands.startChat(uiState.user.id!!)
                }
            }
        }else if(uiState.contact == null) {
            ButtonRow(text = "Add Contact"){
                commands.addContact(uiState.user.id!!)
            }
        }else if(uiState.hasChatAccess.value){
            ButtonRow(com.example.featuresdk.R.drawable.ic_chat, "Message"){
                commands.startChat(uiState.user.id!!)
            }

            Divider(color = DemoTheme.colors.primary)

            ButtonRow(com.example.featuresdk.R.drawable.ic_call, "Call"){

            }
        }

        Box(Modifier.fillMaxSize().background(DemoTheme.colors.primary))
    }
}

@Composable
fun ButtonRow(drawable: Int? = null, text: String, heightDp:Int = 40, onClick:()->Unit){

    Row(Modifier.height(heightDp.dp).fillMaxWidth().clickable { onClick() },
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically){

        drawable?.let {
            Image(painterResource(drawable), "", Modifier.size(25.dp))
            Spacer(modifier = Modifier.width(8.dp))
        }

        Text(text, modifier = Modifier.padding(4.dp), color = contentColorFor(DemoTheme.colors.primary))
    }
}

@Composable
fun ContactDetailScreenHeader( uiConstraints: LayoutConstraints){
    AppRowContainer(uiConstraints.appHeaderBarHeightDp.dp){

        HeaderBackFeatureEntry{
           NavigationController.instance.back()
        }

        AppHeaderTitle("", uiConstraints.headerWidthDp)

        FeatureEntry(label = "...", onClick = {
            NavigationController.instance.navigate(Screen.ContactSetting)
        })
    }
}


@Preview(showBackground = true)
@Composable
fun PreviewContactDetail(){
    DemoTheme {
        AppBodyView(bodyHeightDp = { 300.dp }) {
            ContactDetailView(
                ContactDetailState().apply {
                user = User(1000, nickname = "Star")
                contact = Contact(0, 1000, name = "ZhangSan")
            }, object : ContactDetailCommands{})
        }
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewContactDetailDark(){
    DemoTheme(darkTheme = true) {
        AppBodyView(bodyHeightDp = { 300.dp }) {
            ContactDetailView(ContactDetailState().apply {
                user = User(1000,nickname = "Kitty")
            },object : ContactDetailCommands{})
        }
    }
}